<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../static/sr/srui.css" />
    <link rel="stylesheet" href="../../lib/ztree/css/zTreeStyle/metro.css"/>
    <link rel="stylesheet" type="text/css" href="../../lib/layer/3.1/skin/layer.css" />
    <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css">

</head>
<body>

<div class="container bs-docs-container">
    <div class="row">
        <!--左侧-->
        <div class="col-md-9" role="main">
            <div class="doc-section">
                <h2 class="page-header">ztree</h2>
                <p>zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点</p>
            </div>

            <div class="doc-section">
                <h2 class="page-header">示例</h2>
                <ul id="treeDemo" class="ztree"></ul>
            </div>

        </div>
    </div>
</div>



<script type="text/javascript" src="../../lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<script type="text/javascript" src="../../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../lib/ztree/js/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="../../lib/layer/3.1/layer.js"></script>

<script>
    var setting = {
        view : {
            showLine:false,//节点连线
            nameIsHTML: true ,//设置 name 属性是否支持 HTML 脚本
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
        },
        edit:{
            enable:true,
            removeTitle:'删除节点',
            renameTitle:'修改节点名称',
            showRemoveBtn:showRemoveBtn,
            showRenameBtn:showRenameBtn,
        },
        data: {
            keep:{
                leaf:false,
                parent:true
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };


    var zNodes =[
        { id:1, pId:0, name:"主页", open:false ,icon:'../../lib/ztree/css/zTreeStyle/img/diy/1_open.png'},
        { id:11, pId:1, name:"资讯管理", open:true,icon:'../../lib/ztree/css/zTreeStyle/img/diy/8.png'},
        { id:111, pId:11, name:"资讯管理",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
        { id:12, pId:1, name:"图片管理", open:true,icon:'../../lib/ztree/css/zTreeStyle/img/diy/8.png'},
        { id:121, pId:12, name:"图片管理",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
        { id:13, pId:1, name:"产品管理", open:true,icon:'../../lib/ztree/css/zTreeStyle/img/diy/8.png'},
        { id:131, pId:13, name:"品牌管理",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
        { id:132, pId:13, name:"分类管理",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
        { id:133, pId:13, name:"产品管理",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
        { id:14, pId:1, name:"评论管理", open:true,icon:'../../lib/ztree/css/zTreeStyle/img/diy/8.png'},
        { id:141, pId:14, name:"评论列表",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
        { id:142, pId:14, name:"意见反馈",icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'},
    ];

    function onClick(event, treeId, treeNode, clickFlag) {
        layer.msg('你点击了'+treeNode.name+'这个节点');
    }

    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }
    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            layer.prompt({
                title:'请输入节点名称'
            },function (val,index) {
                if(val!== undefined){
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    var childNode = {id:(100+newCount),pId:treeNode.id,name:val,icon:'../../lib/ztree/css/zTreeStyle/img/diy/2.png'}
                    zTree.addNodes(treeNode, childNode);
                }
                layer.close(index);
            });
            return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };

    $(function () {
        /*生成ztree*/
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })

</script>

</body>
</html>